<template>
    <!--登录-->
    <div class="login">
        <van-nav-bar
                :fixed="fixed"
                title="修改登录密码"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div class="login-img">
            <div style="width: 48px;height: 48px;margin: 0 auto">
                <img src="../../static/login.png"
                     style="height: 48px;width: 48px"
                />
            </div>
            <h4 class="header_tit_txt">修改登录密码</h4>
            <!--用户名登录-->
            <div class="input-name">
                <form @submit.prevent="showData">
                    <van-cell-group>
                        <van-field
                            v-model="password"
                            type="password"
                            label="旧密码"
                            placeholder="请输入旧密码"
                    />
                        <van-field
                                v-model="password1"
                                type="password"
                                label="新密码"
                                placeholder="请输入新密码"
                        />
                        <van-field
                                v-model="password2"
                                type="password"
                                label="再输入"
                                placeholder="请再次输入新密码"
                        />
                    </van-cell-group>
                    <div :style="{padding:'10px',marginTop:'10px'}">
                        <van-button size="large">确定修改</van-button>
                    </div>
                </form>
            </div>
        </div>
        <div :style="{height: '170px'}"></div>
    </div>
</template>

<script>
    import {ChangePassword} from "../api/data";
    import Vue from 'vue'
    import { Toast } from 'vant';
    Vue.use(Toast);
    export default {
        data() {
            return {
                fixed:true,
                //输入的数据
                password:'',
                password1:'',
                password2:'',
            }
        },
        computed:{
            token:function () {
                return ""
            }
        },
        methods: {
            onClickLeft() {
                this.$router.back()
            },
            showData() {
                if (this.password.length<6) {
                    Toast('请输入正确的旧密码！')
                    return
                }
                if (this.password1.length<6 || this.password2.length<6) {
                    Toast('新密码必须大于6位！')
                    return
                }
                if (this.password2!=this.password1) {
                    Toast('两个输入的密码不一致！')
                    return
                }
                ChangePassword(this.password,this.password1,this.password2,this.token).then(res=>{
                    console.log(res.data)
                    if (res.data.msg == '旧密码不正确!'){
                        Toast('旧密码不正确！')
                        return
                    }
                    if (res.data.code==1) {
                        Toast('修改密码成功！')
                        this.$router.push({path:'/me'})
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .list-inline li {
        display: inline-block;
        float: none !important;
    }

    .mobile-login {
        color: #A39191;
        display: flex;
        width: 98%;
        height: 60px;
        font-size: 20px;
    }

    .login-img ul li {
        margin-top: 5px;
        float: left;
        list-style: none;
        color: #EF5B00;
    }

    .input-name form input {
        border: none;
        outline: none;
        padding: 10px 0px;
        width: 99%;
        height: 50px;
        font-size: 18px;
    }

    .header_tit_txt {
        font-size: 18px;
        padding: 13px 0px;
        color: #424242;
        font-weight: normal;
    }

    .model {
        width: 49px;
        height: 48px;
        margin: 0 auto;
        display: block;
    }

    .login {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }

    .login-img {
        margin-top: 86px;
        width: 100%;
        height: 450px;
        text-align: center;
    }
</style>
